<template>
	<view>
		<view class="nav2">
			<u-navbar title="查看评价" bgColor="transparent" :fixed="false" autoBack>
			</u-navbar>
		</view>
		<view class="m30">
			<view class="bgFff radius30 p30">
				<view class="flex flex-start">
					<u-image :src="api_host + detail.orderPro.icon" mode="" width="76px" height="76px"
						radius="5"></u-image>
					<view class="p10 ml10 flex1">
						<view class="c343 f28 bold">{{detail.orderPro.proName}}</view>
						<u-gap height="10"></u-gap>
						<view v-if="detail.orderType==3">
							<view class="flex-jus f24 c999 mb10" v-for="(item,index) in detail.orderDetails"
								:key="index">
								<text>{{detail.orderPro.proName}} x{{item.buyCount}}</text>
								<text>¥ {{item.price}}</text>
							</view>
						</view>
						<view v-else>
							<view class="flex-jus f24 c999 mb10" v-for="(item,index) in detail.orderDetails"
								:key="index">
								<text>{{item.name}} x{{item.buyCount}}</text>
								<text>¥ {{item.price}}</text>
							</view>
						</view>
					</view>
				</view>
				<u-line color="#eee" margin="20rpx 0"></u-line>
				<view class="flex-jus">
					<text class="bold f32 c343">服务质量评分</text>
					<view class="flex">
						<u-icon name="star-fill" color="#FFD955" size="20"></u-icon>
						<text class="f28 c343 ml10 bold">{{commen_info.score}}</text>
					</view>
				</view>
				<u-gap height="20"></u-gap>
				<view class="">
					<v-rate :rateParams="detail" :stepScores="commen_info.rate_arr" :readonly="true"></v-rate>
				</view>
				<view v-if="commen_info.content">
					<u-line color="#eee" margin="30rpx 0"></u-line>
					<view class="">
						<text class="bold f32 c343">服务短评</text>
					</view>
					<u-gap height="10"></u-gap>
					<view class="flex flex-wrap">
						<view class="radius30 active c343 f24 tag_item mr10 mb10"
							v-for="(item,index) in commen_info.tagList" :key="index">{{item}}</view>
					</view>
					<u-gap height="10"></u-gap>
					<view>
						<u--textarea v-model="commen_info.content" placeholder="写个评价把，可以获取积分哦。" height="200rpx"
							border="none" disabled></u--textarea>
					</view>
				</view>
				<view v-if="commen_info.imgs_arr && commen_info.imgs_arr.length > 0">
					<u-gap height="10"></u-gap>
					<view class="">
						<view class="pore flex flex-wrap">
							<image :src="api_host + item" mode="widthFix" v-for="(item,index) in commen_info.imgs_arr"
								:key="index" @click="$utils.previewImages(index,commen_info.imgs_arr)"
								style="width: 31%;border-radius: 20rpx;margin-right: 10rpx;margin-bottom: 10rpx;">
							</image>
						</view>
					</view>
				</view>
			</view>
			<u-gap height="10"></u-gap>
			<view class="bgFff radius30 p30" v-if="commen_info.reply">
				<view class="c343 flex-jus">
					<text class="f28 bold">平台回复</text>
					<text class="f24">{{commen_info.commentTime}}</text>
				</view>
				<view class="mt20">
					<u--textarea v-model="commen_info.reply" height="200rpx" border="none"
						disabled></u--textarea>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		getOrderdetail,
		getOrdercominfo
	} from '@/common/api_order.js'
	import vRate from '@/components/rate/index.vue'
	export default {
		name: '',
		components: {
			vRate
		},
		data() {
			return {
				detail: {},
				commen_info: {},
				commentTypeList: []
			}
		},
		onLoad(option) {
			this.id = option.id
			this.getOrderdetail()
			this.getOrdercominfo()
		},
		methods: {
			async getOrderdetail() {
				uni.showLoading({
					mask: true
				})
				const res = await getOrderdetail({
					id: this.id
				})
				if (res.code == 200) {
					this.detail = res.data
				}
				uni.hideLoading()
			},
			async getOrdercominfo() {
				uni.showLoading({
					mask: true
				})
				const res = await getOrdercominfo({
					id: this.id
				})
				if (res.code == 200) {
					this.commen_info = res.data
					this.commen_info.rate_arr = this.commen_info.stepScore.split(',')
					this.commen_info.imgs_arr = this.commen_info.images ? this.commen_info.images.split(',') : []
				}
				uni.hideLoading()
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FEF4E8;
	}

	.tag_item {
		padding: 10rpx 30rpx;
		border: 1px solid transparent;
	}

	.active {
		color: #FF7F1C;
		background-color: #FFFAF5;
		border-color: #FF7F1C;
	}

	.title-text {
		line-height: 28rpx;
	}

	.title-text::before {
		content: '';
		position: absolute;
		left: -30rpx;
		top: 2rpx;
		height: 13px;
		width: 2px;
		background-color: #FFDE6D;
	}
</style>